彻底换到新的 CMS 了，Glass 主题介绍

前言：终于是将主站彻底换到自研的 Glass 主题了，谨在此记录一下这段时间的辛苦劳作和收获吧。

介绍

Glass 主题是一款基于 Nuxt 编写，旨在打造一个可以记录各种类型内容的全栈 CMS，具有的功能如下：

• 基本的分类、标签、文章、评论、友情链接、RSS 订阅等博客功能；
• 以 Markdown 为基础的语法扩充，包括各种提示框、轮播图、音乐播放、段落折叠、Git 仓库卡片；
• 针对图片优化的功能，包括具有独特样式的图片分类、实况照片；
• 基于百度内容审核平台过滤内容的评论系统；
• 基于腾讯云 COS、又拍云 USS 的附件管理系统，支持上传图片和视频；
• 完整的后台管理界面，暂不支持多用户（目前系统被设计为单用户）；
• 完整的 CSRF token 鉴权机制、防 XSS、防 SQL 注入机制。

本 CMS 不开源。

技术栈

• UI：Nuxt + Tailwindcss + shadcn/ui + iconify
• 数据存储：Prisma + MySQL + 腾讯云 COS
• 代码高亮：Shiki
• Markdown 解析：Markdown-it
• 图片灯箱：@fancybox/ui
• 轮播图：swiper
• 音乐播放器：@meting/core

样式展示

粗体 斜体 删除线 This is a inline code.

（由于标题会包含在目录中，这里不展示标题）

这是引用文字。

print("Hello World")

标题1	标题2	标题3
内容1	内容2	内容3
内容4	内容5	内容6

使用 - 本地打包

推荐公共资源放在 CDN 中，服务器放在本地，本 CMS 仅支持 MySQL 数据库。

将项目从 Gitee 克隆到本地后，执行 bun install，安装依赖，预编译 nuxt。

在 .env 文件中写入必要的变量，主要是指定数据库配置：

# 用于 Prisma Migrate (prisma migrate dev)
DATABASE_URL="mysql://youruser:yourpassword@localhost:3306/yourdatabase"

# 用于 Prisma MariaDB Adapter (应用运行时)
DB_HOST="localhost"          # 数据库 host
DB_PORT="3306"               # 数据库端口
DB_USER="root"               # 数据库用户名
DB_PASSWORD="your_password"  # 数据库密码
DB_NAME="your_database"      # 数据库名称
COS_SECRET_ID=""             # 腾讯云 sId
COS_SECRET_KEY=""            # 腾讯云 sKey
COS_BUCKET=""                # COS 存储桶
COS_REGION="ap-beijing"      # 地域名称
COS_PREFIX="/"               # 上传的路径
COS_CONCURRENCY=50           # 并行上传数量
PORT=4000                    # 开发服务器监听端口

执行下面的命令初始化数据库：

bunx prisma generate
bunx prisma migrate deploy
bunx prisma db seed

启动开发服务器：

bun run dev

打包：

bun run build

快速将资源上传到腾讯云 COS：

bun run upload:cos

使用 - 在服务器上运行

从 Gitee 上 Clone 源码，和本地一样，先安装依赖，到 bunx prisma db seed，在前面加个 NODE_ENV=production，即初始化生产环境的种子。

打包后，.output 文件夹会产生 server 和 public 文件夹，执行 node .output/server/index.mjs 启动开发服务器。

或使用宝塔面板的 Node 版本管理器，创建传统项目，并配置伪静态：

# Service Worker 主文件
location = /sw.js {
    root /www/wwwroot/glass;
    add_header Cache-Control "no-cache";
}

# Workbox 相关脚本（关键）
location ^~ /workbox {
    root /www/wwwroot/glass;
    add_header Cache-Control "public, max-age=0, must-revalidate";
}

# 多目录统一处理
location ~ ^/(emojis|fonts|icons|imgs|skills)/ {
    return 302 https://cdn.imqi1.com$request_uri;
}

# 单文件
location = /favicon.ico {
    return 302 https://cdn.imqi1.com/favicon.ico;
}

其他

本项目复刻了 Typecho 版的 NewImQi1 主题，实现了原主题的全部功能，只去掉了一个详细信息显示（我觉得应该没人会看）。